<template>
  <!-- 图片剪切工具 https://ext.dcloud.net.cn/plugin?id=10333-->
  <view class="container">
    <qf-image-cropper
        :src="imageSrc"
        :width="width"
        :height="height"
        :areaScale="1"
        :radius="radius"
        :showAngle="showAngle"
        :rotatable="rotatable"
        :choosable="choosable"
        @crop="handleCrop"
    ></qf-image-cropper>
  </view>
</template>

<script>

export default {
  data() {
    return {
      // 回调方法名称，注意必须全局唯一否则会多次调用
      callbackMethod: "cropperSuccess",
      // 类型(做一定的业务逻辑区分，参数将回传)
      type: 0,
      // 剪切框宽度，默认342
      width: 342,
      // 剪切框高度，默认216
      height: 216,
      // 裁剪图片圆角半径，单位px
      radius: 0,
      // 是否支持翻转
      rotatable: true,
      // 是否支持从本地选择素材
      choosable: true,
      // 是否展示四个支持伸缩的角
      showAngle: false,
      /*
       * 图片src，传参用encodeURIComponent()编码，接收用decodeURIComponent()解码；
       * url组装方式，如下：
       * 认证目录图片 {{ config.baseUrl }} + /common/lksign-authentication?path=/profile/personIdCard/2023/05/18/6465d6a55b38dc0120eecf4f.jpg&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpbl91c2VyX2tleSI6IjEyMyJ9.H_2sUlG_f_0V76BFwPRSQI9iOOx-aovFLapLHtXRnxs
       * 普通目录图片 {{ config.baseUrl }} + /profile/avatarPerson/2023/05/09/6459c9035b3862b8de87e9c0.png
       */
      imageSrc: "",
    }
  },
  /** 获取组件设置参数 */
  onLoad(option) {
    // 回调方法名称，注意必须全局唯一否则可能会多次调用，默认为cropperSuccess，可为空
    this.callbackMethod = (!!option.callbackMethod) ? option.callbackMethod : this.callbackMethod;
    // 图片类型
    this.type = (!!option.type) ? option.type : this.type;
    // 剪切框宽度
    this.width = (!!option.width) ? parseInt(option.width) : this.width;
    // 剪切框高度
    this.height = (!!option.height) ? parseInt(option.height) : this.height;
    // 裁剪图片圆角半径，单位px
    this.radius = (!!option.radius) ? parseInt(option.radius) : this.radius;
    // 是否支持翻转
    this.rotatable = (option.rotatable == null || option.rotatable == "true") ? true : false;
    // 是否支持从本地选择素材
    this.choosable = (option.choosable == null || option.choosable == "true") ? true : false;
    // 是否展示四个支持伸缩的角
    this.showAngle = (option.showAngle == null || option.showAngle == "false") ? false : true;
    // 图片src
    this.imageSrc = decodeURIComponent(option.imageSrc);
  },
  methods: {
    /** 图片剪切完成并回传上级页面 */
    handleCrop(e) {
      // 返回上级页面
      uni.navigateBack(1);
      // 回调方法
      uni.$emit(this.callbackMethod, e.tempFilePath, this.type);
    },
  }
}
</script>

<style>
</style>
